<template>
	<view class="loginBox paddTopheder">

		<view class="contentBox">
			<view class="title" style="font-weight:bold;font-size: 46rpx;">
				欢迎登录
			</view>
			<!-- 手机号登录 -->
			<view class="cell_phone_number" v-if="loginType==='phone'">
				<u--form labelPosition="left" :model="form" :rules="rules" ref="uForm">
					<u-form-item prop="phone" borderBottom style="width: 620rpx;" ref="phone">
						<view class="">
							<u-input border="none" clearable :maxlength="11" v-model="form.phone" placeholder="请输入手机号"
								prefixIconStyle="font-size: 22px;color: #909399;margin-right:40upx;">
								<template slot="prefix">
									<!-- <u-icon name="chat" color="#2979ff" size="28"></u-icon> -->
									<view class="numberqian">
										<text>+86</text>
										<view class="hr"></view>
									</view>
								</template>
							</u-input>
						</view>
					</u-form-item>
					<u-form-item borderBottom style="width: 620rpx;margin-top: 20px;">
						<view style="width: 100%;">
							<u-input border="none" v-model="code" placeholder="请输入验证码"
								prefixIconStyle="font-size: 20px;color: #909399;margin-left:40upx;">
								<template slot="suffix">
									<!-- <u-icon name="chat" color="#2979ff" size="28"></u-icon> -->
									<view class="numberqian">
										<span v-if="time==0" @click="getYZM"
											style="font-size:14px;color: #02A7F0;">获取验证码</span>
										<span v-else style="font-size: 14px;color: #4E4E4E;"><span
												style="color: #02A7F0;">{{time}}</span>秒后重新发送</span>
									</view>
								</template>
							</u-input>
						</view>
					</u-form-item>
				</u--form>

			</view>
			<view class="" style="height: 200rpx;" v-else></view>
			<!-- 一键登录 -->
	<!-- 		<view class="Onekey" v-if="authority&&loginType==='yijian'">
				<view class="phone">
					{{form.phone|getPhone}}
				</view>
				<view style="height: 60upx;"></view>
				<u-button type="primary" text="本机号码一键登录" class="authority" @tap="yijianLogin()">
				</u-button>
			</view> -->
		
			<view class="agree_onBox" style="margin: 0 auto;">
				<u-button type="primary" text="登录" class="authority" @tap="phoneCode()" style="margin-top: 80rpx;">
				</u-button>
				<u-checkbox-group v-model="agreeOn" :labelSize="14" :size="14"
					style="width: 620rpx;position: absolute;bottom: 40px;">
					<view class="agreeOn" style="width: 620rpx;font-size: 24rpx;margin-top: 30rpx;">
						<u-checkbox shape="circle" label='我已阅读并同意' :labelSize="12" name="1" />
						<view style="font-size: 24rpx;" @click="toUser">《同城货运用户协议》</view>
						<view style="font-size: 24rpx;" @click="toprivacy">《隐私政策》</view>
					</view>
				</u-checkbox-group>
			</view>
		</view>
	</view>
</template>

<script>
	import Header from '@/components/header/header.vue'
		import user from '@/api/modules/users.js'
	export default {
		data() {
			return {
				authority: true,
				form: {
					port: "CARGOOWNER_LOGIN",
					phone: ''
				},
				rules: {
					phone: [{
						required: true,
						message: '请输入正确的格式',
						pattern: this.$regExp.numberPhone3,
						trigger: ['change', 'blur']
					}]
				},
				agreeOn: [],
				loginType: 'yijian',
				time: 0,
				code: ""
			}
		},
		methods: {
			toUser(){
				uni.navigateTo({
					url:'/pages/login/user/user'
				})
			},
			toprivacy(){
				uni.navigateTo({
					url:'/pages/login/privacy/privacy'
				})
			},
			//切换类型
			loginTypeMD(val) {
				// console.log(111)
				this.loginType = val
			},
			//获取验证码
	async	getYZM() {
				if (this.time == 0) {
					if (this.agreeOn.length) {
								let res = await user.send_login_sms(this.form)
								if (res.data.code == 200) {
									this.time = 60
									this.timClick()
								}
					} else {
						uni.showToast({
							title: '请勾选用户隐私政策',
							icon: 'none',
						})
					}
				}

			},
			async phoneCode() {
				let that = this
				let res = await user.owner_login({
					phone: this.form.phone,
					code: this.code
				})
				if (res.data.code == 200) {
					let res2=await user.getInvite()
					this.$store.commit('users/setToken', res.data.data.access_token)
					uni.switchTab({
						url: '/pages/index/index',
						success() {
							uni.setStorageSync('userid'.res.data.data.user_id)
						}
					})
				} else {
					this.code = ''
				}
			},
			timClick() {
				this.setInter = setInterval(() => {
					if (this.time > 0) {
						this.time--
					} else {
						clearInterval(this.setInter)
					}
				}, 1000)
			},
			leftClick() {
				uni.switchTab({
					url: '/pages/getOrder/getOrder'
				})
			},
			yijianLogin() {
				if (this.agreeOn.length) {
					var d = {
						phone: this.form.phone,
						code: "123321"
					}
					this.$http.users.owner_login(d).then((res) => {
						if (res.data.code == 200) {
							this.$store.commit('users/setToken', res.data.data.access_token)
							uni.switchTab({
								url: '/pages/getOrder/getOrder'
							})
						}
					})
				} else {
					uni.$showMsg({
						title: '请勾选用户隐私政策'
					})
				}
			}
		},
		components: {
			Header
		},
		mounted() {
			this.loginType = "phone"

			// console.log(this.$store.users.state.cont,'aaa')
		}
	}
</script>

<style lang="scss" scoped>
	$martop: 20%;


	.loginBox {
		background-color: #fff;
		height: 100vh;

		.contentBox {
			width: 100%;
			height: 80%;
			box-sizing: border-box;
			padding: 40upx 26upx;
			// background-color: red;

			.title {
				margin-left: 30upx;
				font-size: 36upx;
				font-weight: 600;
			}

			.cell_phone_number {
				margin-top: $martop;
				margin-left: 30rpx;

				.numberqian {
					display: flex;
					align-items: center;
					font-size: 30upx;


					.hr {
						margin-left: 30upx;
						margin-right: 16upx;
						height: 28upx;
						border-right: 2upx solid #ccc;
					}
				}

			}

			.authority {

				width: 620rpx;
			}

			.Onekey {
				margin-top: $martop;
				display: flex;
				flex-direction: column;
				align-items: center;

				.phone {
					font-size: 42upx;
				}
			}

			.agree_onBox {
				width: 620rpx;
				display: flex;
				flex-wrap: wrap;
				margin-top: 40upx;

				.u-checkbox-group--row {
					width: 100%;
				}

				.agreeOn {
					width: 100%;
					display: flex;
					flex-wrap: wrap;
					line-height: 42upx;

					view {
						color: #02A7F0;
						font-size: 28upx;
					}
				}
			}
		}

		.loginType {
			display: flex;
			justify-content: space-around;

			.typeBox {
				display: flex;
				flex-direction: column;
				align-items: center;

				.text {
					margin-top: 10upx;
				}
			}
		}
	}
</style>